<!--
 * @Author: your name
 * @Date: 2021-07-29 09:21:29
 * @LastEditTime: 2021-08-06 14:38:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\07-评分效果添加\start.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="../15-组件/css/common.css" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2642268_19pl4awwhcr.css"
    />
    <title>评分效果</title>
    <style>
      .star {
        font-size: 20px;
        color: orangered;
      }
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <star :enterscore="5" , :count="50" ; :count="10"></star>
    </div>
    <script>
      Vue.component("star", {
        props: ["count", "score"],
        template: `
        <div>
            <i class="iconfont star" 
            :class="{
                'icon-inconstar1'
                :item<=enterscore,'icon-iconstar'
                :item>enterscore
            }"
        v-for="(item) in count"
        @mouseenter="enterscore=item" @mouseleave="enterscore=myscore"
        @click="myscore=item"
            ></i>          
        </div>
            `,
        data() {
          return {
            enterscore: this.score,
            myscore: this.score,
          };
        },
      });
      new Vue({
        el: "#app",
        data() {
          return {
            count: 10, // 星星总数
            score: 5, // 得分
            enterscore: 5, // 鼠标悬停得分
          };
        },
      });
    </script>
  </body>
</html>
